<ui:composition template="/template/template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets">

    <ui:define name="corpo">

        <p:breadCrumb >
            <p:menuitem value="#" url="#" />
            <p:menuitem value="Paginal Principal" url="#" />
            <p:menuitem value="Questões" url="#" />
        </p:breadCrumb>
        <h:form id="form">

            <p:dataTable id="cars" var="questao" value="#{mbQuestoes.listaQuestao}" rowKey="#{questao.questao}"
                         selection="#{mbQuestoes.selectedQuestao}" selectionMode="single">

                <f:facet name="footer">
                    Clique em uma questão para a exclusão
                </f:facet>

                <p:column headerText="ID Questão">
                    #{questao.idquestao}
                </p:column>

                <p:column headerText="Questão">
                    #{questao.questao}
                </p:column>

                <p:column headerText="Categoria" >
                    #{questao.categoria.nome}
                </p:column>

                <p:column headerText="Validada">
                    #{questao.validada}
                </p:column>

                <f:facet name="footer">
                    <p:commandButton id="viewButton" value="Excluir" icon="ui-icon-search"
                                     update=":form:display" oncomplete="excluir.show()"/>
                </f:facet>

                <p:ajax event="rowSelect" update=":form:display" oncomplete="excluir.show()" />

            </p:dataTable>

            <p:dialog id="dialog" header="Detalhe da exclusão" widgetVar="excluir" resizable="false"
                      width="200" showEffect="clip" hideEffect="fold">

                <h:panelGrid id="display" columns="2" cellpadding="4">

                    <h:outputText value="Id Questão:" />
                    <h:outputText value="#{mbQuestoes.selectedQuestao.idquestao}" />

                    <h:outputText value="Questão:" />
                    <h:outputText value="#{mbQuestoes.selectedQuestao.questao}" />

                    <h:outputText value="Categoria: " />
                    <h:outputText value="#{mbQuestoes.selectedQuestao.categoria.nome}" />

                    <h:outputText value="Validada: " />
                    <h:outputText value="#{mbQuestoes.selectedQuestao.validada}" />
                </h:panelGrid>
            </p:dialog>





        </h:form>

    </ui:define>
</ui:composition>